<template>
	<!-- background-color: #F29100; -->
	<view id="list">
		<block v-for="(item,index) in data" :key="index">
			<view class="list-box">
				<!-- 加阴影 -->
				<view class="list-box-content" :class="{touch:index==touch,'my-border':border}"
					@tap="seeActivity(index)" @longtap="" @touchstart='touch=index' @touchend='touch=-1'>
					<view style="width: 140rpx;height: 140rpx;border-radius: 20rpx;overflow: hidden;">
						<u-image shape="square" ref="uImage" :width="160" :height="160" :src="item.image"
							mode="aspectFill">
							<u-loading size="44" mode="flower" slot="loading" v-if="false"></u-loading>
							<view v-if="false" slot="error" style="font-size: 24rpx;">加载失败</view>
						</u-image>
					</view>
					<view class="list-box-content-right">
						<view class="title" style="display: flex;justify-content: space-between;align-items: center;
							overflow: hidden;
							-webkit-line-clamp: 1;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-box-orient: vertical;">
							{{item.title}}
						</view>
						<view class="detail">
							{{item.detail}}
						</view>
					</view>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	export default {
		props: {
			'data': Array,
			"border": Boolean
		},
		data() {
			return {
				touch: -1
			}
		},
		methods: {
			seeActivity(index) {
				console.log(index)
				this.touch = index
				console.log(this.data[index])
				var that = this
				uni.request({
					url: this.url.club.info + '/' + that.data[index].clubId,
					method: 'GET',
					header: {},
					success: (res) => {
						console.log(res.data.club)
						var club = res.data.club;
						that.touch = -1
						uni.navigateTo({
							url: '/pages/activity/activity-details?activity=' + encodeURIComponent(JSON
								.stringify(that.data[index])) + "&club=" + encodeURIComponent(JSON
								.stringify(club))
						});
					},
					fail: (res) => {
						console.log(res)
					}
				});
			}
		}
	}
</script>

<style>
	#list {
		padding-bottom: 20rpx;
	}

	.list-box {
		height: 180rpx;
		width: 100%;
		padding: 20rpx 20rpx 0 20rpx;

	}

	.list-box-content {
		display: flex;
		padding: 10rpx;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		justify-content: center;
		align-items: center;
		transition: all .25s linear;
	}

	.touch {
		background-color: #e4e7ed;
	}

	.list-box-content-right {
		margin: 10rpx 10rpx 0 20rpx;
		width: calc(100% - 200rpx);
	}

	.title {
		font-size: 36rpx;
		font-weight: 800;
		margin-bottom: 10rpx;
		overflow: hidden;
		-webkit-line-clamp: 1;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}

	.detail {
		overflow: hidden;
		-webkit-line-clamp: 2;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		color: #606266;
	}

	.my-border {
		border: 1px solid #edf0f3;
	}
</style>
